import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import Sidebar from 'components/sideBar'
import { Layout, Flex, Fixed } from 'react-layout-pane'
import SideNav from 'components/sideNav'
import { global } from 'ducks'
import Header from './header'
import Content from './content'

const SideNavView = ({ sideNavVisibale, actionShowSideNav }) => {
  console.log(sideNavVisibale)
  return (
    <Sidebar
      sidebar={
        <SideNav.ToolBarW160>
          <SideNav.BtnGroup>
            <SideNav.ToolBarButtonRight text="数据集" />
            <SideNav.ToolBarButtonRight active text="数据集" />
            <SideNav.ToolBarButtonRight text="数据集" />
            <SideNav.ToolBarButtonRight text="数据集" />
            <SideNav.ToolBarButtonRight text="数据集" />
          </SideNav.BtnGroup>
        </SideNav.ToolBarW160>
      }
      docked={sideNavVisibale}
      open={sideNavVisibale}
      styles={{ sidebar: { background: '#f5f7fa' } }}
      shadow={false}
    >
      <Layout type="column" style={{ borderLeft: '1px solid #e6e9f0' }}>
        <Fixed className="header">
          <Header />
        </Fixed>
        <Flex className="content">
          <Content />
        </Flex>
      </Layout>
    </Sidebar>
  )
}

SideNav.propTypes = {
  sideNavVisibale: PropTypes.bool.isRequired,
  actionShowSideNav: PropTypes.func.isRequired,
}

const mapStateToProps = state => ({
  sideNavVisibale: global.selectors.sideNavVisibale(state),
})

const mapDispatchToProps = {
  actionShowSideNav: global.creators.actionHideSideOpen,
}

export default connect(mapStateToProps, mapDispatchToProps)(SideNavView)
